<template>
  <div>
    <!--预览-->
    <div>
      <el-form ref="form" :inline="true" size="small">
        <monaco-editor-diff
          ref="monaco"
          :value="dataForm.convertFileContent"
          :old-value="dataForm.sourceFileContent"
          :language="language"
          style="height: 430px"
          @change="handleChange"
        />
      </el-form>
    </div>
    <div v-if="isAllowEdit" slot="footer" class="dialog-footer" style="text-align: center;margin-top: 20px">
      <el-button type="primary" @click="preserveContrast">保  存</el-button>
    </div>
  </div>
</template>
<script>
import scriptConvertListApi from '@/api/script/transfer/script-convert-list'
import MonacoEditorDiff from '@/components/MonacoEditor/monacoEditorDiff'

export default {
  name: 'ScriptDetail',
  components: { MonacoEditorDiff },
  props: {
    convertListPkId: {
      type: String
    },
    isAllowEdit: {
      type: Boolean
    }
  },
  data() {
    return {
      dataForm: { convertFileContent: null, sourceFileContent: null },
      language: 'python'
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      scriptConvertListApi.queryById(this.convertListPkId).then(res => {
        this.dataForm = res
      })
    },
    handleChange(value) {
      this.dataForm.convertFileContent = value
    },
    // 保存预览
    preserveContrast() {
      this.$refs.monaco.getValue()
      scriptConvertListApi.upload(this.dataForm).then(res => {
        this.$notify({ title: '成功', message: '保存成功！', type: 'success' })
      })
    }
  }
}
</script>
<style rel="stylesheet/scss"  lang="scss" scoped>
.source{
  width: 400px;
  height: 550px;
  border: 1px solid #969494;
  overflow-x: hidden;
  p{
    background: #92dab3;
  }
}
</style>
